<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>병해충 통합관리 서비스</title>

<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/content.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

<style>
.portlet-placeholder {
	border: 1px dotted black;
	margin: 0 1em 1em 0;
	height: 50px;
}
</style>
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/js/i18n/grid.locale-kr.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=238163d2e97b2a40fa70f7e332dafaa5"></script>
<script src="/js/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="/js/common.js"></script>
</head>

<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">병해충 통합관리 서비스</a> </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">발생조사관리</a></li>
        <li><a href="#contact">방제계획 및 실적</a></li>
        <li><a href="#contact">보고관리</a></li>
        <li><a href="#contact">발생경보</a></li>
        <li><a href="#contact">병해충 현황 </a></li>
      </ul>
    </div>
    <!-- /.nav-collapse --> 
  </div>
  <!-- /.container --> 
</div>
<!-- /.navbar -->

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="well well-sm">
        <p class=""><strong>경남도청 홍길동님 환영합니다.</strong>
        <span class="pull-right"><button class="btn btn-success btn-xs">로그아웃</button></span>
        </p>
        <form class="form-horizontal" role="form">
          <div class="form-group form-group-sm">
            <label class="col-lg-4 control-label">병해충</label>
            <div class="col-lg-8">
              <select class="form-control">
                <option>소나무재선충</option>
              </select>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <label class="col-lg-4 control-label">시도</label>
            <div class="col-lg-8">
              <select name="" class="form-control">
                <option>경남도청</option>
              </select>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <label class="col-lg-4 control-label">시군구</label>
            <div class="col-lg-8">
              <select class="form-control">
                <option>선택</option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading ">병해충 달력</div>
        <div class="panel-body text-center">
          <div class="btn-group btn-group-sm form-group">
            <button type="button" class="btn btn-primary">1년</button>
            <button type="button" class="btn btn-primary">6개월</button>
            <button type="button" class="btn btn-primary">3개월</button>
            <button type="button" class="btn btn-primary">1개월</button>
          </div>
          <div class="datepicker"></div>
        </div>
      </div>
      <div class="text-center well">
        <table summary="지역별 중기예보를 나타낸 도표입니다." class="table table-condensed">
          <thead>
            <tr class="text-center">
              <th align="center" class="text-center" >8일(월)</th>
              <th align="center" class="text-center">9일(화)</th>
              <th align="center" class="text-center">10일(수)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td align="center" ><img src="/images/NB03.png" alt="구름많음" class="png24"></td>
              <td align="center" ><img src="/images/NB01.png" alt="구름많음" class="png24"></td>
              <td align="center" ><img src="/images/NB02.png" alt="구름많음" class="png24"></td>
            </tr>
            <tr>
              <td align="center" ><span class="text-primary">19</span>/<span class="text-danger">26</span></td>
              <td align="center"><span class="text-primary">19</span>/<span class="text-danger">26</span></td>
              <td align="center"><span class="text-primary">19</span>/<span class="text-danger">26</span></td>
            </tr>
          </tbody>
        </table>
        <ul class="list-inline">
          <li>
            <select>
              <option>경상남도</option>
            </select>
          </li>
          <li>구름조금</li>
          <li>22℃</li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="col-md-3 column"> 
      
      <!-- 발생현황 표 -->
      <div class="panel panel-primary portlet" style="height: 465px;
overflow: hidden;">
        <div class="panel-heading ">발생현황 <small>목록</small>
          <div class="pull-right">
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-minus"></span> </button>
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-fullscreen"></span> </button>
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-remove"></span> </button>
          </div>
        </div>
        <table cellspacing="0" cellpadding="0" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th width="72">구분</th>
              <th align="right" width="72">9.11</th>
              <th align="right" width="72">9.12</th>
              <th align="right" width="72">9.13</th>
              <th width="72" class="warning">합계</th>
            </tr>
          </thead>
          <tfoot style="display:table-row-group">
          <tbody>
            <tr class="warning">
              <td>합계</td>
              <td align="right">935 </td>
              <td align="right">893 </td>
              <td align="right">786 </td>
              <td align="right" class="warning">2614 </td>
            </tr>
              </tfoot>
            
            <tr>
              <td>거제시</td>
              <td align="right">30 </td>
              <td align="right">83 </td>
              <td align="right">12 </td>
              <td align="right" class="warning">125 </td>
            </tr>
            <tr>
              <td>거창군</td>
              <td align="right">78 </td>
              <td align="right">32 </td>
              <td align="right">65 </td>
              <td align="right" class="warning">174 </td>
            </tr>
            <tr>
              <td>고성군</td>
              <td align="right">51 </td>
              <td align="right">94 </td>
              <td align="right">85 </td>
              <td align="right" class="warning">229 </td>
            </tr>
            <tr>
              <td>김해시</td>
              <td align="right">53 </td>
              <td align="right">9 </td>
              <td align="right">21 </td>
              <td align="right" class="warning">82 </td>
            </tr>
            <tr>
              <td>남해군</td>
              <td align="right">96 </td>
              <td align="right">63 </td>
              <td align="right">81 </td>
              <td align="right" class="warning">241 </td>
            </tr>
            <tr>
              <td>밀양시</td>
              <td align="right">63 </td>
              <td align="right">5 </td>
              <td align="right">38 </td>
              <td align="right" class="warning">106 </td>
            </tr>
            <tr>
              <td>사천시</td>
              <td align="right">58 </td>
              <td align="right">45 </td>
              <td align="right">33 </td>
              <td align="right" class="warning">137 </td>
            </tr>
            <tr>
              <td>산청군</td>
              <td align="right">81 </td>
              <td align="right">9 </td>
              <td align="right">33 </td>
              <td align="right" class="warning">123 </td>
            </tr>
            <tr>
              <td>양산시</td>
              <td align="right">7 </td>
              <td align="right">81 </td>
              <td align="right">97 </td>
              <td align="right" class="warning">185 </td>
            </tr>
            <tr>
              <td>의령군</td>
              <td align="right">31 </td>
              <td align="right">24 </td>
              <td align="right">53 </td>
              <td align="right" class="warning">108 </td>
            </tr>
            <tr>
              <td>진주시</td>
              <td align="right">78 </td>
              <td align="right">8 </td>
              <td align="right">31 </td>
              <td align="right" class="warning">117 </td>
            </tr>
            <tr>
              <td>창녕군</td>
              <td align="right">63 </td>
              <td align="right">19 </td>
              <td align="right">17 </td>
              <td align="right" class="warning">99 </td>
            </tr>
            <tr>
              <td>창원시</td>
              <td align="right">58 </td>
              <td align="right">76 </td>
              <td align="right">50 </td>
              <td align="right" class="warning">184 </td>
            </tr>
            <tr>
              <td>통영시</td>
              <td align="right">78 </td>
              <td align="right">90 </td>
              <td align="right">58 </td>
              <td align="right" class="warning">225 </td>
            </tr>
            <tr>
              <td>하동군</td>
              <td align="right">16 </td>
              <td align="right">67 </td>
              <td align="right">61 </td>
              <td align="right" class="warning">144 </td>
            </tr>
            <tr>
              <td>함안군</td>
              <td align="right">4 </td>
              <td align="right">81 </td>
              <td align="right">24 </td>
              <td align="right" class="warning">109 </td>
            </tr>
            <tr>
              <td>함양군</td>
              <td align="right">82 </td>
              <td align="right">8 </td>
              <td align="right">4 </td>
              <td align="right" class="warning">93 </td>
            </tr>
            <tr>
              <td>합천군</td>
              <td align="right">9 </td>
              <td align="right">99 </td>
              <td align="right">23 </td>
              <td align="right" class="warning">131 </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="panel panel-primary portlet">
        <div class="panel-heading "> 병해충 <small>지도</small>
          <div class="pull-right">
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-minus"></span> </button>
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-fullscreen"></span> </button>
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-remove"></span> </button>
          </div>
        </div>
        <div class="main_prsts5"></div>
      </div>
    </div>
    <div class="col-md-7 column">
      <div class="panel panel-primary portlet">
        <div class="panel-heading ">발생현황 <small>지도</small>
          <div class="pull-right">
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-minus"></span> </button>
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-fullscreen"></span> </button>
            <button type="button" class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-remove"></span> </button>
          </div>
        </div>
        <div id="map"></div>
      </div>
    </div>
  </div>
  <hr>
  <footer>
    <p>&copy; Company 2013</p>
  </footer>
</div>
<!--/.container--> 
<script type="text/javascript">

	var oSeoulCityPoint = new nhn.api.map.LatLng(35.4210198, 129.0843919);

	var defaultLevel = 8;
	var oMap = new nhn.api.map.Map(document.getElementById('map'), { 
									point : oSeoulCityPoint,
									zoom : defaultLevel,
									enableWheelZoom : true,
									enableDragPan : true,
									enableDblClickZoom : false,
									mapMode : 1,
									activateTrafficMap : false,
									activateBicycleMap : false,
									minMaxLevel : [ 1, 14 ],
									size : new nhn.api.map.Size("100%", 800)           });
	var oSlider = new nhn.api.map.ZoomControl();
	oMap.addControl(oSlider);
	oSlider.setPosition({
			top : 10,
			left : 10
	});
	
	var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
	oMap.addControl(oMapTypeBtn);
	oMapTypeBtn.setPosition({
			bottom : 10,
			right : 80
	});
	
	var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
	oThemeMapBtn.setPosition({
			bottom : 10,
			right : 10
	});
	oMap.addControl(oThemeMapBtn);
	
	
	
	var oSize = new nhn.api.map.Size(7, 7);
	var oOffset = new nhn.api.map.Size(7, 7);
	var oIcon = new nhn.api.map.Icon('/images/dot.png', oSize, oOffset);
	var oCircle = new nhn.api.map.Circle();
	var oInfoWnd = new nhn.api.map.InfoWindow();
	oInfoWnd.setVisible(false);
	oMap.addOverlay(oInfoWnd);
	
	oInfoWnd.setPosition({
			top : 20,
			left :20
	});
	
	var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
	oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
	
	oInfoWnd.attach('changeVisible', function(oCustomEvent) {
			if (oCustomEvent.visible) {
					oLabel.setVisible(false);
			}
	});
	
	var oPolyline = new nhn.api.map.Polyline([], {
			strokeColor : '#f00', // - 선의 색깔
			strokeWidth : 5, // - 선의 두께
			strokeOpacity : 0.5 // - 선의 투명도
	}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
	var oPolygon = new nhn.api.map.Polygon([], {
			strokeColor : '#f00', // - 선의 색깔
			strokeWidth : 5, // - 선의 두께
			strokeOpacity : 0.5 // - 선의 투명도
	});
	oMap.addOverlay(oPolygon);
	
	oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
	
	oMap.attach('mouseenter', function(oCustomEvent) {
	
			var oTarget = oCustomEvent.target;
			// 마커위에 마우스 올라간거면
			if (oTarget instanceof nhn.api.map.Marker) {
					var oMarker = oTarget;
					oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
			}
	});
	
	oMap.attach('mouseleave', function(oCustomEvent) {
	
			var oTarget = oCustomEvent.target;
			// 마커위에서 마우스 나간거면
			if (oTarget instanceof nhn.api.map.Marker) {
					oLabel.setVisible(false);
			}
	});
	
	oMap.attach('click', function(oCustomEvent) {
			var oPoint = oCustomEvent.point;
			var oTarget = oCustomEvent.target;
			console.debug(oPoint.y + " , " + oPoint.x);
			oInfoWnd.setVisible(false);
			// 마커 클릭하면
			if (oTarget instanceof nhn.api.map.Marker) {
					// 겹침 마커 클릭한거면
					if (oCustomEvent.clickCoveredMarker) {
							return;
					}
					// - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며, 
					// - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
					// - 단, DIV 의 position style 은 absolute 가 되면 안되며, 
					// - absolute 의 경우 autoPosition 이 동작하지 않습니다. 
					oInfoWnd.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
							'<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 5px 2px 2px !important">' + 
							'발생일시 : 2014.07.18 <br />'
							+ '병해충명: 소나무 재선충<br/>' 
							+ '위치정보: ' + oTarget.getPoint()
							+'<span></div>');
					oInfoWnd.setPoint(oTarget.getPoint());
					oInfoWnd.setPosition({right : 0, top : 4});
					oInfoWnd.setVisible(true);
					oInfoWnd.autoPosition();
					return;
			}
			//var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() });
			//oMarker.setPoint(oPoint);
			//oMap.addOverlay(oMarker);

			/*var oCircle = new nhn.api.map.Circle();
			oCircle.setCenterPoint(oPoint);
			oCircle.setRadius(1);
			oMap.addOverlay(oCircle);*/
	
			//var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
			//aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
			//oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
			//var aPoints = oPolygon.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.

			var aPoints = oPolygon.getPoints();
			aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
			oPolygon.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
			
	});
	oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4270212 , 129.0887391) , title : '마커 : 35.4270212 , 129.0887391'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4154808 , 129.0777635) , title : '마커 : 35.4154808 , 129.0777635'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4266818 , 129.07058)   , title : '마커 : 35.4266818 , 129.07058 '   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4378224 , 129.0568718) , title : '마커 : 35.4378224 , 129.0568718'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4264974 , 129.0513666) , title : '마커 : 35.4264974 , 129.0513666'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4098201 , 129.1023212) , title : '마커 : 35.4098201 , 129.1023212'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4067027 , 129.1089548) , title : '마커 : 35.4067027 , 129.1089548'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4194858 , 129.1130858) , title : '마커 : 35.4194858 , 129.1130858'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.41959 , 129.1160836) , title : '마커 :   35.41959 , 129.1160836 '   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.413649 , 129.1180795) , title : '마커 :  35.413649 , 129.1180795'   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4125024 , 129.1175279) , title : '마커 : 35.4125024 , 129.1175279'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4206136 , 129.1257963) , title : '마커 : 35.4206136 , 129.1257963'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4221714 , 129.1279423) , title : '마커 : 35.4221714 , 129.1279423'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.422734 , 129.129011) , title : '마커 :   35.422734 , 129.129011 '   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4196559 , 129.1432592) , title : '마커 : 35.4196559 , 129.1432592'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4180998 , 129.1303638) , title : '마커 : 35.4180998 , 129.1303638'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4180736 , 129.1323016) , title : '마커 : 35.4180736 , 129.1323016'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4161869 , 129.1331447) , title : '마커 : 35.4161869 , 129.1331447'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.414168 , 129.1331039) , title : '마커 :  35.414168 , 129.1331039'   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4082815 , 129.131047) , title : '마커 :  35.4082815 , 129.131047'   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4056929 , 129.1304662) , title : '마커 : 35.4056929 , 129.1304662'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4011162 , 129.1275552) , title : '마커 : 35.4011162 , 129.1275552'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4003007 , 129.123839) , title : '마커 :  35.4003007 , 129.123839'   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.3979436 , 129.1167448) , title : '마커 : 35.3979436 , 129.1167448'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.3923688 , 129.1129342) , title : '마커 : 35.3923688 , 129.1129342'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.3914234 , 129.1189047) , title : '마커 : 35.3914234 , 129.1189047'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.404444 , 129.1052463) , title : '마커 :  35.404444 , 129.1052463'   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4004972 , 129.098297) , title : '마커 :  35.4004972 , 129.098297'   }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.3962057 , 129.0955698) , title : '마커 : 35.3962057 , 129.0955698'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.3915932 , 129.0953027) , title : '마커 : 35.3915932 , 129.0953027'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4138276 , 129.0938027) , title : '마커 : 35.4138276 , 129.0938027'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4268166 , 129.1150307) , title : '마커 : 35.4268166 , 129.1150307'  }));
oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.427566 , 129.1236813 ) , title : '마커 : 35.427566 , 129.1236813 '  }));
	

  $(function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".panel-heading",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
 
    $( ".portlet-toggle" ).click(function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  });
  </script>
</body>
</html>
